<template>
	<view>
		<view class="map-search">
			<u-search placeholder="搜索地址" v-model="keyword" :show-action="showAct" action-text="取消" :animation="animation" @focus="handleShow"
			 @blur="handleHidden" @custom="handleHidden" @search="handleSearch"></u-search>
		</view>
		<view>
			<map style="width: 750rpx; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers">
			</map>
		</view>
		<view class="nowAddress"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				showAct: false,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 0,
				longitude: 0,
				covers: [{
					latitude: 0,
					longitude: 0,
					iconPath: '/static/dingweizhen.png'
				}]
			}
		},
		created() {
			this.getAddress();
		},
		methods: {
			handleShow() {
				this.showAct = true;
			},
			handleHidden() {
				this.showAct = false;
			},
			handleSearch() {

			},
			getAddress() {
				let _this = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						_this.longitude = res.longitude;
						_this.latitude = res.latitude;
						_this.covers[0].latitude = res.latitude;
						_this.covers[0].longitude = res.longitude;
					}
				});
			}
		}
	}
</script>

<style scoped>
	.map-search {
		padding: 20rpx 30rpx;
		background: #FFFFFF;
	}
	.nowAddress{
		width: 99rpx;
		height: 99rpx;
		border-radius: 50rpx;
		overflow: hidden;
		background: url(../../static/nowAdd.png) no-repeat center center/100% 100%;
		position: fixed;
		bottom: 20rpx;
		right: 20rpx;
	}
</style>
